<template>
  <a-layout>
    <a-layout-content :style="{padding: '0 50px', marginTop: '64px', minHeight: '620px'}">
      <div style="margin-top: 20px; text-align: left">
        <a-descriptions title="订单提交成功，请尽快支付！请勿刷新页面~" bordered>
          <a-descriptions-item label="订单号">{{orderSn}}</a-descriptions-item>
          <a-descriptions-item label="应付金额">{{orderInfo.payAmount}}</a-descriptions-item>
        </a-descriptions>
        <a-statistic-countdown :value="deadline" style="margin-right: 50px" @finish="onFinish">
          <template #title>
            <span>关闭订单倒计时</span>
            <a-tooltip placement="right">
              <template #title>
                <span>hurry up!</span>
              </template>
              <question-circle-two-tone style="margin-left: 5px" />
            </a-tooltip>
          </template>
        </a-statistic-countdown>
      </div>

      <div style="background-color: #ececec; padding: 20px; margin: 10px; text-align: left">
        <a-card title="支付方式">
          <a-card-grid style="width: 20%; text-align: center">
            <a>
              <a-image :preview="false" :src="aliPayLogo" @click="alipay"/>
            </a>
          </a-card-grid>
          <a-card-grid style="width: 20%; text-align: center">微信</a-card-grid>
        </a-card>
      </div>
    </a-layout-content>

  </a-layout>

</template>

<script setup>
import {ref, onBeforeMount} from 'vue'
import router from "@/router";
import request from "@/utils/request";
import {message} from "ant-design-vue";
import aliPayLogo from "@/assets/img/aliPayLogo.png"

let orderSn = ref(router.currentRoute.value.params.orderSn)
let orderInfo = ref({})
const deadline = ref(Date.now() + 1000 * 60 * 10)

const getOrderInfo = (orderId)=> {
  request({
    url: `/auth/user/order/getOrderDetail/${orderId}`,
    method: 'get'
  }).then(res => {
    console.log(res)
    if(res.code === 0) {
      orderInfo.value = res.data.list[0]
    } else {
      message.info(res.msg)
    }
  }).catch(err => {
    message.error(`请求订单信息异常${err.message}`)
  })
}

const alipay = ()=> {
  request({
    url: '/third-party/alipay.trade.wap.pay',
    method: 'post',
    data: {
      out_trade_no: orderSn.value,
      subject: '测试',
      total_amount: orderInfo.value.payAmount,
      orderItemList: orderInfo.value.orderItems
    }
  }).then(res => {
    console.log(res)
    if (res.code === 0) {
      const divForm = document.getElementsByTagName("div")
      if (divForm.length) {
        document.body.removeChild(divForm[0])
      }
      const div = document.createElement("div")
      div.innerHTML = res.data
      document.body.appendChild(div)
      document.forms[0].submit()
    } else {
      message.info(res.msg)
    }
  }).catch(err => {
    message.error(err.message)
  })
}

onBeforeMount(_=>{
  let orderId = router.currentRoute.value.params.orderId
  getOrderInfo(orderId)
})
</script>